<template>
  <view class="horizontalbox">
    <view class="horizontal">
      <view
        v-for="(item, index) in list"
        class="content"
        :key="index"
        v-if="isTop(index)"
      >
        <view class="imagebox" @click="handleItemClick(item, index)">
          <!-- 多选复选框 -->
          <view v-if="isMultiSelect" class="multi-select-checkbox"
                :class="{ 'checked': isSelected(item.Id) }"
                @click.stop="toggleSelect(item.Id)">
            <uni-icons 
              :type="isSelected(item.Id) ? 'checkbox-filled' : 'circle'" 
              size="24" 
              :color="isSelected(item.Id) ? '#03A9F4' : '#ffffff'" 
            />
          </view>
          <image 
            class="image" 
            :src="item.cover || defaultImg" 
            mode="aspectFill" 
            lazy-load
            @error="handleImageError"
          ></image>
          <uni-icons v-if="item.Type=='Movie' || item.Type=='Video'" custom-prefix="iconfont" type="icon-play1" color="#fff"
                    class="icon" size="40"></uni-icons>
          <uni-icons v-if="item.UserData.Played" type="checkbox-filled" color="hsl(116, 41.7%, 50.2%)"
                    class="playedicon" size="25"></uni-icons>
          <text class="video-duration" v-if="item.Type=='Movie' || item.Type=='Video'">{{ formattedTime(item.RunTimeTicks) }}</text>
          <text class="video-type" v-if="item.Type=='BoxSet'">合集</text>
          <text class="video-type" v-if="item.Type=='Movie' || item.Type=='Video'">电影</text>
          <text class="video-type" v-if="item.Type=='Tag'">标签</text>
          <text class="video-type" v-if="item.Type=='Genre'">流派</text>
          <text class="video-type" v-if="item.Type=='Folder'">文件夹</text>
        </view>
        <view class="info">
          <view class="">
            <text class="title" 
                  :style="{ fontSize: item.Name.length>16 ? '0.8rem' : '1rem' }"
                  @click.stop="openDetailPopup(item)">{{ item.Name }}</text>
          </view>
        </view>
      </view>
      <nothing v-if="list.length == 0" :msg="msg" />
    </view>
  </view>
</template>

<script>
import nothing from '@/components/nothing.vue'
import {
  videoDataFormatter
} from "@/common/videoDataFormatter.js";
export default {
  name: 'horizontal',
  props: {
    list: {
      type: Array,
      default: []
    },
    top: {
      type: Number,
      default: 6
    },
    msg: {
      type: String,
      default: '空的哦☹'
    },
    httpParams: {
      type: Object,
      default() {
        return {}
      }
    },
    isMultiSelect: {
      type: Boolean,
      default: false
    },
    selectedIds: {
      type: Array,
      default: () => []
    }
  },
  components: {
    nothing
  },
  data() {
    return {
      defaultImg: require("@/static/img/errorImg.jpg"), // 默认图片（本地资源必须用 require）
    };
  },
  methods: {
    isTop(index) {
      if (this.top === 0) {
        return true
      } else {
        return index < this.top
      }
    },
    isSelected(id) {
      return this.selectedIds.includes(id);
    },
    toggleSelect(id) {
      this.$emit('toggle-select', id);
    },
    isLongTitle(videoTitle) {
      console.log(videoTitle)
      let charCount = 0;
      for (let i = 0; i < videoTitle.length; i++) {
        const char = videoTitle.charAt(i);
        charCount += char.match(/[^\x00-\xff]/) ? 2 : 1;
      }
      return charCount > 32;
    },
    // 打开详情弹窗
    openDetailPopup(item) {
      this.$emit('open-detailPopup', item);
    },
    // 处理后的时长
    formattedTime(runTimeTicks) {
      return videoDataFormatter.formatRunTime(runTimeTicks);
    },
    // 处理后的视频大小
    formattedSize(videoSize) {
      return videoDataFormatter.formatVideoSize(videoSize);
    },
    // 处理后的分辨率
    formattedRes(videoWidth, videoHeight) {
      return videoDataFormatter.formatResolution(
        videoWidth,
        videoHeight
      );
    },
    formattedDate(dateCreated) {
      return videoDataFormatter.formatDate(dateCreated, 'YYYY-MM-DD');
    },
    handleImageError(e) {
      // 防止循环触发 error 事件
      if (e.target.src !== this.defaultImg) {
        e.target.src = this.defaultImg;
        e.currentTarget.src = this.defaultImg;
      }
    },
    handleItemClick(item, index) {
      if (this.isMultiSelect) {
        this.toggleSelect(item.Id);
      } else {
        this.clickItem(item, index); // 原有点击逻辑
      }
    },
    clickItem(item, index) {
        const handleNavigation = (type) => {
          switch (type) {
            case "Movie":
            case "Video":
              // 电影/视频类型处理
              this.$store.dispatch('saveLargeList', {
                data: this.list,
                index,
                httpParams: this.httpParams
              }).then(() => {
                uni.navigateTo({
                  url: `/pages/player/${platform}/short`
                });
              });
              break;
            case "BoxSet":
			case "Genre":
			case "Tag":
              let seriesParams = {
                ParentType: item.Type,
                ChildIds: item.Id,
                ParentName: item.Name
              };
              uni.navigateTo({ url: `/pages/series/goDetail?params=${encodeURIComponent(JSON.stringify(seriesParams))}` });
              break;
            default:
              uni.showToast({
              	title: '不支持该类型播放',
              	icon: 'info',
              })
          }
        };
      
        // 区分APP和非APP平台
        let platform;
        // #ifdef APP
        platform = 'app';
        // #endif
        // #ifndef APP
        platform = 'web';
        // #endif
      
        handleNavigation(item.Type);
    }
  }
}
</script>

<style lang="scss" scoped>
.horizontalbox {
  width: 100%;
  // overflow-x: auto;
  padding-bottom: 10px;
  // -webkit-overflow-scrolling: touch;
}
.horizontalbox::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.horizontal {
  display: flex;
  flex-direction: row;
  width: auto;
  // padding: 0 8px;
}
.content {
  display: flex;
  padding: 8px;
  padding-bottom: 0;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.content:hover {
  transform: translateY(-4px);
}

.imagebox {
  position: relative;
  width: 118px;
  height: 158px;
  margin: 6px 0;

  .icon {
    position: absolute;
    top: 35%;
    left: 40%;
  }
  
  .playedicon {
    position: absolute;
    top: 2%;
    right: 2%;
  }
  
  &.selected-item {
    box-shadow: 0 0 0 2px #ff3333, 0 0 10px rgba(255, 51, 51, 0.5);
    border-radius: 6px;
  }
  
  .multi-select-checkbox {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
    
    &.checked {
      background-color: #000;
    }
  }
}

.content .image {
  margin-right: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 6px #333;
  background-image: url('@/static/img/errorImg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  background-position: center center;
  background-size: 100% 100%;
}

.content .title {
  font-size: clamp(0.6rem, 0.7rem, 0.8rem);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin: 10px 0 0 0;
  text-align: start;
  // color: #BCB6B8;
  --tw-text-opacity: 1;
  width: 105px;
}

.content .msg {
  font-size: 0.8rem;
  color: #888;
  display: block;
}

.content .info {
  width: 105px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.content .video-desc {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.content .text-original {
  color: #e80080;
}

.content .video-duration {
  --tw-text-opacity: 1;
  color: #E5E9F0;
  font-size: .75rem;
  line-height: 1rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
  padding-left: .5rem;
  padding-right: .5rem;
  --tw-bg-opacity: .75;
  background-color: #1F2937;
  position: absolute;
  right: .25rem;
  bottom: .25rem;
  border-radius: .5rem;
}

.content .video-type {
  --tw-text-opacity: 1;
  color: #E5E9F0;
  font-size: .75rem;
  line-height: 1rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
  padding-left: .5rem;
  padding-right: .5rem;
  --tw-bg-opacity: .75;
  background-color: #1E40B9;
  position: absolute;
  left: .25rem;
  bottom: .25rem;
  border-radius: .5rem;
}

.content .tag-tip {
  background-color: hsl(116, 41.7%, 50.2%);
  color: #ffffff;
  padding: 0 5px;
  border-radius: 2px;
}

.ellip {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: 52px;
  overflow: hidden;
}

/* 弹窗样式 */
.popup-content {
  min-width: 80%;
  background-color: #353535;
  border-radius: 10px;
  padding: 16px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 0.5px dashed #eee;
  margin-bottom: 16px;
}

.popup-title {
  font-weight: bold;
}

.popup-body {
  max-height: 60vh;
  overflow-y: auto;
}

.info-item {
  display: flex;
  margin-bottom: 12px;
}

.label {
  color: #666;
  width: 80px;
  flex-shrink: 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}

.tag-item {
  border-radius: 4px;
  padding: 2px 8px;
  margin: 0 4px 4px 0;
  font-size: 0.5rem;
  background-color: hsl(116, 41.7%, 50.2%);
  color: #ffffff;
}
.checklist-text{
  border-radius: 4px;
  padding: 2px 8px;
  margin: 0 4px 4px 0;
  font-size: 0.5rem;
  color: #bbbbbb;
}
.checklist-box.is--tag{
  padding: 3px 2px;
  border: 1px #4CAF50 solid;
  border-radius: 3px;
  background-color: #4CAF50;
}
</style>